<template>
  <div class="profile-container">
    <div class="header-top">
      <el-button type="text" @click="goBack" class="back-button">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
    </div>

    <div class="profile-header">
      <h1>个人信息管理</h1>
      <p>管理您的个人资料和账户设置</p>
    </div>

    <div class="profile-content">
      <!-- 个人信息卡片片（核心修改：新增可编辑字段） -->
      <el-card class="profile-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-title">
              <el-icon class="header-icon"><User /></el-icon>
              <span>基本信息</span>
            </div>
            <el-button type="primary" @click="editProfile" :disabled="isEditing || uploadingAvatar">
              {{ isEditing ? '保存中...' : '编辑信息' }}
            </el-button>
          </div>
        </template>

        <div class="form-content">
          <!-- 头像上传区域 -->
          <div class="avatar-container">
            <div class="avatar-preview">
              <img 
                :src="avatarUrl || defaultAvatarUrl" 
                alt="用户头像" 
                class="avatar-image"
              >
            </div>
            
            <div class="avatar-actions">
              <el-button 
                type="primary" 
                size="small" 
                @click="handleAvatarUpload"
                :disabled="!isEditing || uploadingAvatar"
                class="avatar-upload-btn"
              >
                <i class="fa fa-upload mr-1"></i>
                上传头像
              </el-button>
              <input 
                type="file" 
                ref="avatarInput" 
                accept="image/jpeg,image/png" 
                @change="handleFileChange"
                class="hidden"
              >
              
              <el-button 
                type="text" 
                size="small" 
                @click="handleAvatarReset"
                :disabled="!isEditing || !avatarUrl || uploadingAvatar"
                class="avatar-reset-btn"
              >
                <i class="fa fa-refresh mr-1"></i>
                恢复默认
              </el-button>
            </div>
            
            <div class="avatar-hint">
              <p class="hint-text">支持JPG、PNG格式，最大2MB</p>
              <p class="hint-text">建议尺寸：200x200像素</p>
            </div>
          </div>

          <el-form
            ref="profileFormRef"
            :model="profileForm"
            :rules="profileRules"
            label-width="100px"
            :disabled="!isEditing"
          >
            <!-- 基础不可编辑字段 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户ID" prop="userId">
                  <el-input v-model="profileForm.userId" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户名" prop="userName">
                  <el-input v-model="profileForm.userName" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="邮箱" prop="userEmail">
                  <el-input v-model="profileForm.userEmail" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="角色" prop="userRole">
                  <el-input v-model="profileForm.userRole" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 新增可编辑字段（匹配后端updateInfo接口） -->
            <el-row :gutter="20" class="mt-4">
              <el-col :span="12">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="profileForm.realName" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="profileForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="profileForm.gender" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                    <el-option label="保密" value="保密"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                    v-model="profileForm.birthday"
                    type="date"
                    placeholder="请选择生日"
                    value-format="YYYY-MM-DD"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="个性签名" prop="signature">
                  <el-input
                    v-model="profileForm.signature"
                    placeholder="请输入个性签名（最多50字）"
                    type="textarea"
                    :rows="2"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="状态" prop="userStatus">
                  <el-tag :type="profileForm.userStatus === '0' ? 'success' : 'danger'">
                    {{ profileForm.userStatus === '0' ? '正常' : '禁用' }}
                  </el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册时间" prop="registerTime">
                  <el-input v-model="profileForm.registerTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item v-if="isEditing">
              <el-button type="primary" @click="saveProfile" :loading="saving || uploadingAvatar">
                {{ saving ? '保存中...' : '保存修改' }}
              </el-button>
              <el-button @click="cancelEdit" :disabled="saving || uploadingAvatar">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <!-- 借阅统计卡片（保持不变） -->
      <el-card class="profile-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-title">
              <el-icon class="header-icon"><DataAnalysis /></el-icon>
              <span>借阅统计</span>
            </div>
            <el-button type="text" @click="refreshStats">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>

        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">{{ borrowStats.totalBorrowed || 0 }}</div>
            <div class="stat-label">总借阅数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ borrowStats.currentlyBorrowed || 0 }}</div>
            <div class="stat-label">当前借阅</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ borrowStats.overdueCount || 0 }}</div>
            <div class="stat-label">逾期数量</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ borrowStats.remainingQuota || 0 }}</div>
            <div class="stat-label">剩余额度</div>
          </div>
        </div>
      </el-card>

      <!-- 修改密码卡片（保持不变） -->
      <el-card class="profile-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-title">
              <el-icon class="header-icon"><Lock /></el-icon>
              <span>修改密码</span>
            </div>
          </div>
        </template>

        <div class="form-content">
          <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="passwordRules"
            label-width="100px"
          >
            <el-form-item label="当前邮箱" prop="email">
              <el-input
                v-model="passwordForm.email"
                placeholder="请输入注册时的邮箱"
                disabled
                tooltip="邮箱为账号注册邮箱，不可修改"
              ></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码（6-20位）"
                show-password
                autocomplete="new-password"
              ></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                placeholder="请再次输入新密码"
                show-password
                autocomplete="new-password"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="changePassword" :loading="changingPassword">
                {{ changingPassword ? '修改中...' : '修改密码' }}
              </el-button>
              <el-button @click="resetPasswordForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { Refresh, ArrowLeft, User, DataAnalysis, Lock } from '@element-plus/icons-vue'
import { 
  getCurrentUser, updateProfile,
  resetPasswordByEmail, uploadAvatar, resetAvatarToDefault, getAvatar, updateAvatar
} from '@/api/user'
import { getMyBorrowedBooks, getMyRecords } from '@/api/book' 
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据（核心修改：新增后端支持的可编辑字段）
const profileForm = ref({
  userId: '',
  userName: '',
  userEmail: '',
  userRole: '',
  userStatus: '',
  registerTime: '',
  realName: '', // 新增：真实姓名
  phone: '', // 新增：手机号
  gender: '', // 新增：性别
  birthday: '', // 新增：生日
  signature: '' // 新增：个性签名
})

const passwordForm = ref({
  email: '',
  newPassword: '',
  confirmPassword: ''
})

const borrowStats = ref({
  totalBorrowed: 0,
  currentlyBorrowed: 0,
  overdueCount: 0,
  remainingQuota: 3
})

// 状态管理
const isEditing = ref(false)
const saving = ref(false)
const changingPassword = ref(false)
const uploadingAvatar = ref(false)

// 表单引用
const profileFormRef = ref()
const passwordFormRef = ref()
const avatarInput = ref(null)

// 头像相关
const avatarUrl = ref('')
const tempAvatarUrl = ref('')
const defaultAvatarUrl = 'https://p11-doubao-search-sign.byteimg.com/labis/556e6ce4457c87dadf77e6edb7c34a3a~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1777338993&x-signature=jrwvnPNL41yHsULnoMQLmU9IEMc%3D'

// 表单验证规则（核心修改：新增可编辑字段的验证）
const profileRules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在2到20个字符', trigger: 'blur' }
  ],
  userEmail: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  // 新增：可编辑字段的验证规则
  realName: [
    { max: 10, message: '真实姓名最多10个字符', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  signature: [
    { max: 50, message: '个性签名最多50个字符', trigger: 'blur' }
  ]
})

const passwordRules = reactive({
  email: [
    { required: true, message: '当前邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度需在6-20位之间', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 方法：返回上一页
const goBack = () => {
  router.go(-1)
}

// 加载用户基本信息（核心修改：填充新增的可编辑字段）
const loadUserInfo = async () => {
  try {
    const response = await getCurrentUser()
    if (response.data) {
      const userData = response.data
      // 填充所有字段（含新增的可编辑字段）
      profileForm.value = {
        userId: userData.userId,
        userName: userData.userName,
        userEmail: userData.userEmail,
        userRole: userData.userRole,
        userStatus: userData.userStatus,
        registerTime: userData.registerTime || '未知',
        realName: userData.realName || '', // 新增字段
        phone: userData.phone || '', // 新增字段
        gender: userData.gender || '', // 新增字段
        birthday: userData.birthday || '', // 新增字段
        signature: userData.signature || '' // 新增字段
      }
      // 同步邮箱到密码表单
      passwordForm.value.email = userData.userEmail
      
      // 加载用户头像
      await loadUserAvatar(userData)
    } else {
      ElMessage.error('获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 加载用户头像
const loadUserAvatar = async (userData) => {
  try {
    // 从用户数据中获取头像URL
    if (userData && userData.avatarUrl) {
      avatarUrl.value = userData.avatarUrl
    } else {
      // 尝试从本地存储获取
      const storedUser = JSON.parse(localStorage.getItem('userInfo') || '{}')
      if (storedUser.avatarUrl) {
        avatarUrl.value = storedUser.avatarUrl
      } else {
        avatarUrl.value = ''
      }
    }
    tempAvatarUrl.value = avatarUrl.value
  } catch (error) {
    console.error('获取用户头像失败:', error)
    avatarUrl.value = ''
    tempAvatarUrl.value = ''
  }
}

// 借阅统计逻辑（保持不变）
const loadBorrowStats = async () => {
  try {
    const userName = profileForm.value.userName
    if (!userName) return

    const borrowedRes = await getMyBorrowedBooks()
    const currentBorrow = borrowedRes.data || []
    const currentlyBorrowed = currentBorrow.length

    const historyRes = await getMyRecords()
    const historyBorrow = historyRes.data || []
    const historyCount = historyBorrow.length

    const totalBorrowed = historyCount + currentlyBorrowed
    const now = new Date()
    const overdueCount = currentBorrow.filter(item => {
      if (!item.bookReturntime) return false
      const returnTime = new Date(item.bookReturntime)
      return returnTime < now
    }).length
    const maxQuota = 3
    const remainingQuota = Math.max(0, maxQuota - currentlyBorrowed)

    borrowStats.value = {
      totalBorrowed,
      currentlyBorrowed,
      overdueCount,
      remainingQuota
    }
  } catch (error) {
    console.error('获取借阅统计失败:', error)
    ElMessage.warning('获取借阅统计失败，显示默认数据')
  }
}

// 编辑个人信息（保持不变）
const editProfile = () => {
  isEditing.value = true
  tempAvatarUrl.value = avatarUrl.value
}

// 取消编辑（保持不变）
const cancelEdit = () => {
  isEditing.value = false
  avatarUrl.value = tempAvatarUrl.value
  loadUserInfo()
}

// 保存个人信息修改（核心修改：传递后端支持的字段）
const saveProfile = async () => {
  try {
    await profileFormRef.value.validate()
    saving.value = true

    // 关键修改：新增 userName 字段传递
    const updateData = {
      userName: profileForm.value.userName, // 加入用户名参数
      realName: profileForm.value.realName,
      phone: profileForm.value.phone,
      gender: profileForm.value.gender,
      birthday: profileForm.value.birthday,
      signature: profileForm.value.signature
    }

    const response = await updateProfile(updateData)
    // 优化判断：对比返回的 userName 与修改后的值
    if (response.code === 0 && response.data.userName === profileForm.value.userName) {
      ElMessage.success('个人信息更新成功')
      isEditing.value = false
      // 更新本地存储（同步 userName）
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
      userInfo.userName = profileForm.value.userName // 同步本地用户名
      userInfo.realName = profileForm.value.realName
      userInfo.phone = profileForm.value.phone
      userInfo.gender = profileForm.value.gender
      userInfo.birthday = profileForm.value.birthday
      userInfo.signature = profileForm.value.signature
      userInfo.avatarUrl = avatarUrl.value
      localStorage.setItem('userInfo', JSON.stringify(userInfo))
    } else {
      ElMessage.error('个人信息更新失败，用户名未修改')
    }
  } catch (error) {
    console.error('更新个人信息失败:', error)
    ElMessage.error('更新个人信息失败')
  } finally {
    saving.value = false
  }
}

// 修改密码逻辑（保持不变）
const changePassword = async () => {
  try {
    await passwordFormRef.value.validate()
    changingPassword.value = true

    const params = {
      email: passwordForm.value.email,
      newPassword: passwordForm.value.newPassword
    }

    const response = await resetPasswordByEmail(params)
    if (response.code === 0) {
      ElMessage.success('密码修改成功，请使用新密码登录')
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      router.push('/login')
    } else {
      ElMessage.error(response.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    ElMessage.error('修改密码失败')
  } finally {
    changingPassword.value = false
  }
}

// 重置密码表单（保持不变）
const resetPasswordForm = () => {
  passwordForm.value = {
    email: profileForm.value.userEmail || '',
    newPassword: '',
    confirmPassword: ''
  }
  if (passwordFormRef.value) {
    passwordFormRef.value.resetFields()
  }
}

// 刷新统计数据（保持不变）
const refreshStats = () => {
  loadBorrowStats()
  ElMessage.success('统计数据已刷新')
}

// 头像上传相关方法
const handleAvatarUpload = () => {
  if (!isEditing) return
  avatarInput.value.click()
}

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (!file) return

  // 验证文件类型
  if (!['image/jpeg', 'image/png'].includes(file.type)) {
    ElMessage.error('请上传JPG或PNG格式的图片')
    return
  }

  // 验证文件大小
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过2MB')
    return
  }

  // 显示预览
  const reader = new FileReader()
  reader.onload = (e) => {
    avatarUrl.value = e.target.result
  }
  reader.readAsDataURL(file)

  // 自动上传
  uploadAvatarFile(file)
}

const uploadAvatarFile = async (file) => {
  let loading = null
  try {
    uploadingAvatar.value = true
    loading = ElLoading.service({
      lock: true,
      text: '上传中...',
      background: 'rgba(255, 255, 255, 0.7)'
    })

    const formData = new FormData()
    formData.append('file', file)
    
    const response = await uploadAvatar(formData)
    // 修改：检查响应是否成功
    if (response && response.code === 0) {
      // 修改：处理两种可能的响应格式
      if (typeof response.data === 'string') {
        // 情况1：后端返回字符串类型的URL
        avatarUrl.value = response.data
        ElMessage.success('头像上传成功')
        
        // 更新本地存储
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        userInfo.avatarUrl = avatarUrl.value
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        
        // 额外调用URL保存到用户信息中
        await updateAvatar(avatarUrl.value)
      } else if (response.data && response.data.avatarUrl) {
        // 情况2：后端返回包含avatarUrl属性的对象
        avatarUrl.value = response.data.avatarUrl
        ElMessage.success('头像上传成功')
        
        // 更新本地存储
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        userInfo.avatarUrl = avatarUrl.value
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
      } else {
        // 响应格式不正确
        ElMessage.error('头像上传失败: 响应格式不正确')
        avatarUrl.value = tempAvatarUrl.value
      }
    } else {
      // 上传失败
      const errorMsg = response && response.message ? response.message : '上传失败'
      ElMessage.error('头像上传失败: ' + errorMsg)
      avatarUrl.value = tempAvatarUrl.value
    }
  } catch (error) {
    console.error('上传头像失败:', error)
    ElMessage.error('上传头像失败')
    avatarUrl.value = tempAvatarUrl.value
  } finally {
    uploadingAvatar.value = false
    if (loading) {
      loading.close()
    }
  }
}

const handleAvatarReset = () => {
  if (!isEditing) return
  
  ElMessageBox.confirm('确定要恢复默认头像吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      uploadingAvatar.value = true
      // 调用专门的恢复默认头像接口
      const response = await resetAvatarToDefault()
      if (response.code === 0) {
        avatarUrl.value = ''
        ElMessage.success('已恢复默认头像')
        
        // 更新本地存储
        const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        userInfo.avatarUrl = ''
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
      } else {
        ElMessage.error('重置头像失败: ' + (response.message || '未知错误'))
      }
    } catch (error) {
      console.error('重置头像失败:', error)
      ElMessage.error('重置头像失败: ' + (error.message || '网络错误'))
    } finally {
      uploadingAvatar.value = false
    }
  }).catch(() => {
    // 用户取消操作
  })
}

// 生命周期（保持不变）
onMounted(async () => {
  await loadUserInfo();
  await loadBorrowStats();
})
</script>

<style scoped>
/* 原有样式保持不变，新增以下样式优化新增字段排版 */
.mt-4 {
  margin-top: 16px;
}

.el-textarea__wrapper {
  border-radius: 15px;
  border: 2px solid rgba(168, 237, 234, 0.3);
  background: rgba(255, 255, 255, 0.8);
}

.el-select__wrapper, .el-date-picker__wrapper {
  border-radius: 15px;
  border: 2px solid rgba(168, 237, 234, 0.3);
  background: rgba(255, 255, 255, 0.8);
}

/* 原有样式内容... */
.profile-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
  padding: 20px;
}

.profile-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.header-top {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.back-button {
  font-size: 16px;
  color: #333;
  padding: 12px 20px;
  margin-bottom: 15px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.back-button:hover {
  color: #d299c2;
  background: rgba(255, 255, 255, 1);
  border-color: #a8edea;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(168, 237, 234, 0.4);
}

.back-button .el-icon {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.back-button:hover .el-icon {
  background: linear-gradient(135deg, #d299c2, #fef9d7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: scale(1.1);
}

.profile-header {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 100px;
  padding: 40px 20px;
  animation: fadeInDown 0.8s ease-out;
  background: transparent;
}

.profile-header h1 {
  color: #333;
  margin-bottom: 15px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-header p {
  color: #666;
  font-size: 18px;
  font-weight: 500;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.profile-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  animation: slideInUp 0.8s ease-out both;
}

.profile-card:nth-child(1) { animation-delay: 0.4s; }
.profile-card:nth-child(2) { animation-delay: 0.6s; }
.profile-card:nth-child(3) { animation-delay: 0.8s; }

.profile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
  font-size: 18px;
  padding: 15px 20px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 20px;
  transition: all 0.3s ease;
}

.card-header:hover .header-icon {
  background: linear-gradient(135deg, #d299c2, #fef9d7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: scale(1.1);
}

.card-header span {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin-top: 20px;
  padding: 20px;
}

.stat-item {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 20px;
  color: #333;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInScale 0.8s ease-out both;
}

.stat-item:nth-child(1) { animation-delay: 0.2s; }
.stat-item:nth-child(2) { animation-delay: 0.4s; }
.stat-item:nth-child(3) { animation-delay: 0.6s; }
.stat-item:nth-child(4) { animation-delay: 0.8s; }

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d299c2, #fef9d7);
  transition: left 0.5s ease;
  z-index: -1;
}

.stat-item:hover::before {
  left: 0;
}

.stat-item:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 15px 30px rgba(168, 237, 234, 0.4);
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #333, #666);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.stat-item:hover .stat-number {
  background: linear-gradient(135deg, #d299c2, #fef9d7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 16px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
}

.stat-item:hover .stat-label {
  color: #333;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.form-content {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 25px;
}

.el-form-item__label {
  font-weight: 600;
  color: #333;
}

/* 使用深度选择器确保Element Plus组件样式生效 */
:deep(.el-input__wrapper) {
  border-radius: 15px !important;
  border: 2px solid rgba(168, 237, 234, 0.3) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
}

:deep(.el-input__wrapper:hover) {
  border-color: #a8edea !important;
  box-shadow: 0 5px 15px rgba(168, 237, 234, 0.2) !important;
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #a8edea !important;
  box-shadow: 0 5px 20px rgba(168, 237, 234, 0.3) !important;
}

:deep(.el-textarea__wrapper) {
  border-radius: 15px !important;
  border: 2px solid rgba(168, 237, 234, 0.3) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-select__wrapper), 
:deep(.el-date-picker__wrapper) {
  border-radius: 15px !important;
  border: 2px solid rgba(168, 237, 234, 0.3) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-button) {
  margin-right: 15px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  border: none !important;
  color: #333 !important;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #d299c2, #fef9d7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(168, 237, 234, 0.4) !important;
}

:deep(.el-button--text) {
  color: #a8edea !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(168, 237, 234, 0.3) !important;
  padding: 8px 16px !important;
}

:deep(.el-button--text:hover) {
  color: #d299c2 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #a8edea !important;
  transform: translateY(-2px) !important;
}

:deep(.el-tag) {
  border-radius: 15px !important;
  font-weight: 600 !important;
}

/* 头像上传区域样式 */
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(168, 237, 234, 0.1), rgba(254, 214, 227, 0.1));
  border-radius: 20px;
  border: 1px solid rgba(168, 237, 234, 0.3);
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.avatar-preview {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 4px solid white;
  transition: all 0.3s ease;
}

.avatar-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(168, 237, 234, 0.3);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.avatar-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.avatar-upload-btn,
.avatar-reset-btn {
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
}

.avatar-upload-btn {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  color: #333 !important;
  border: none !important;
}

.avatar-upload-btn:hover {
  background: linear-gradient(135deg, #d299c2, #fef9d7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(168, 237, 234, 0.4) !important;
}

.avatar-reset-btn {
  color: #a8edea !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(168, 237, 234, 0.3) !important;
}

.avatar-reset-btn:hover {
  color: #d299c2 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #a8edea !important;
  transform: translateY(-2px) !important;
}

.avatar-hint {
  text-align: center;
}

.hint-text {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.hidden {
  display: none;
}

@media (max-width: 768px) {
  .profile-container {
    padding: 10px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    padding: 15px;
  }

  .stat-number {
    font-size: 24px;
  }

  .avatar-preview {
    width: 120px;
    height: 120px;
  }
}
</style>
